<template lang="html">
  <div class="">
    <footer>
    <div class="a_b_z">
        <a @click="topmao('A')">A</a>
        <a @click="topmao('B')">B</a>
        <a @click="topmao('C')">C</a>
        <a @click="topmao('D')">D</a>
        <a @click="topmao('F')">F</a>
        <a @click="topmao('G')">G</a>
        <a @click="topmao('H')">H</a>
        <a @click="topmao('J')">J</a>
        <a @click="topmao('K')">K</a>
        <a @click="topmao('L')">L</a>
        <a @click="topmao('M')">M</a>
        <a @click="topmao('N')">N</a>
        <a @click="topmao('P')">P</a>
        <a @click="topmao('Q')">Q</a>
        <a @click="topmao('R')">R</a>
        <a @click="topmao('S')">S</a>
        <a @click="topmao('T')">T</a>
        <a @click="topmao('W')">W</a>
        <a @click="topmao('X')">X</a>
        <a @click="topmao('Y')">Y</a>
        <a @click="topmao('Z')">Z</a>
    </div>
  </footer>
  </div>
</template>

<script>
export default {
  methods:{
      topmao(zimu){
      document.getElementById(zimu).scrollIntoView(true);
     }
  }
}
</script>

<style lang="css" scoped>
.a_b_z {
    width: 10px;
    line-height: 15px;
    font-size: 14px;
    color: #666666;
    position: fixed;
    right: 3px;
    top: 55px;
    z-index: 300;
    background-color: #FFF;
}
.a_b_z a {
    display: block;
    width: 10px;
    text-align: center;
}
</style>
